{% extends "pos/base.html" %}

{% block content %}
<div class="container mt-4">
  <h2>Branch Subscription Manager</h2>

  <!-- Search by Branch ID (simple input) -->
  <form method="get" class="form-inline mb-3">
    <div class="form-group mr-2">
      <label for="branch_id" class="mr-2">Branch ID</label>
      <input type="number"
             name="branch_id"
             id="branch_id"
             class="form-control"
             placeholder="e.g. 3"
             value="{% if branch %}{{ branch.id }}{% endif %}">
    </div>
    <button type="submit" class="btn btn-primary">Search</button>
  </form>

  <hr>

  <!-- AJAX Select2 search by Branch Name / Company -->
  <div class="mb-3">
    <label for="branch_select">Branch (search by name)</label>
    <select id="branch_select" class="form-control" style="width:100%;">
      {% if branch %}
        <option value="{{ branch.id }}" selected>
          {{ branch.company_name }} / {{ branch.branch_name }} (ID: {{ branch.id }})
        </option>
      {% endif %}
    </select>
    <small class="form-text text-muted">
      Type to search branches (AJAX). Selecting a branch will reload this page.
    </small>
  </div>

  {% if form %}
    <form method="post">
      {% csrf_token %}
      <input type="hidden" name="branch_id" value="{{ branch.id }}">

      <div class="card">
        <div class="card-body">
          <h5 class="card-title">
            {{ branch.company_name }} / {{ branch.branch_name }} (ID: {{ branch.id }})
          </h5>

          <div class="form-row">
            <div class="form-group col-md-6">
              {{ form.company_name.label_tag }}{{ form.company_name }}
            </div>
            <div class="form-group col-md-6">
              {{ form.branch_name.label_tag }}{{ form.branch_name }}
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-md-4">
              {{ form.expiry_date.label_tag }}{{ form.expiry_date }}
            </div>
            <div class="form-group col-md-4">
              {{ form.status.label_tag }}{{ form.status }}
            </div>
          </div>

          <button type="submit" class="btn btn-success">
            Save
          </button>

          <button type="submit"
                  name="delete_branch"
                  value="1"
                  class="btn btn-danger"
                  onclick="return confirm('Are you sure you want to delete this branch?');">
            Delete Branch
          </button>
        </div>
      </div>
    </form>
  {% else %}
    <p class="text-muted">
      Select or search a branch to manage its subscription.
    </p>
  {% endif %}
</div>

{% endblock %}

{% block javascripts %}
  {{ block.super }}
<!-- AJAX + Select2 init -->
<script>
  (function($) {
    $(function() {
      $('#branch_select').select2({
        placeholder: 'Search branch by name',
        allowClear: true,
        ajax: {
          url: '{% url "authentication:branch_ajax" %}',
          dataType: 'json',
          delay: 250,
          data: function (params) {
            return { q: params.term };
          },
          processResults: function (data) {
            return { results: data.results };
          },
          cache: true
        }
      });

      $('#branch_select').on('change', function() {
        var id = $(this).val();
        if (id) {
          var url = '{% url "authentication:branch_subscription_manage" %}' + '?branch_id=' + id;
          window.location.href = url;
        }
      });
    });
  })(jQuery);
</script>
{% endblock %}